<template>
    <div>
    <h1>新闻列表</h1>
    <nav>
        <router-link to="/news-list/sports">体育新闻</router-link>
        <router-link to="/news-list/technology">科技新闻</router-link>
        <router-link to="/news-detail/1">新闻1</router-link>
        <router-link to="/news-detail/2">新闻2</router-link>
    </nav>
    <router-view class="news-list"></router-view>
    </div>
</template>
<script>
export default {
    data () {
    return {
        newsList: [
        {
            id: 1,
            title: '新闻标题1',
            content: '这是新闻1的详细内容'
        },
        {
            id: 2,
            title: '新闻标题2',
            content: '这是新闻2的详细内容'
        }
        ]
    }
    }
}
</script>
<style scoped>
.news-list-container {
    background-color: #f4f4f4;
    padding: 20px;
    border: 1px solid #ccc;
    margin-top: 30px;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
</style>